<template>
	<div class="headertop">
		<div>
			<span class="d">{{name}}</span>
			<div class="content">
				<div class="weather">
					<!-- 当天天气 -->
					<div class="today" v-for="item in list">
						<div class="date">{{item.date_y.slice(5,11)}} {{item.week}}</div>
						<div class="lunar">紫外线:{{item.uv_index}}</div>
							<i ref='myBox' class="iconfont icon-qing icon"></i>
						<div>
							<div class="case fixclear">
								<div class="fl temperature">{{temp}}</div>
								<div class="fr RT">
									<div><sup>o</sup>C</div>
									<div>阴(实时)</div>
								</div>
							</div>
						</div>
						<div class="ct">{{item.temperature}}</div>
						<div class="ct">{{item.weather}}</div>
						<div class="ct">{{item.wind}}</div>
					</div>
					<!-- 未来四天的天气 -->
					<div class="future" v-for="items in future">
						<div class="week">{{items.week}}</div>
						<div class="solar">{{items.date | datefmt('YY-MM-DD') }}</div>
						<div class="icon iconfont icon-qing"></div>
						<div class="future_ct">{{items.temperature}}</div>
						<div class="future_ct">{{items.weather}}</div>
						<div class="future_ct wind">{{items.wind}}</div>
					</div>
				</div> 
			</div>
		</div>
		<div class="skill">
			<div class="explain">
				<h5>人事小姐姐看的眼花可以点击下面<b style="color: red;font-size: 20px;">我</b>这个选项 在里面查看我的技能</h5>
			</div>
			<el-carousel :interval="3000" type="card" height="300px">
    			<el-carousel-item v-for="item in lunar" :key="item">
     				<div>{{item }}</div>
    			</el-carousel-item>
 			</el-carousel>
 			<!-- <div>{{$store.state.skill}}</div> -->
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return{
			lunar:null,
			isShow:false,
			name:"定位中...",
			temp:13,
			list:[
				 {
			      "temperature": "7℃~13℃",
			      "weather": "小雨转多云",
			      "weather_id": {
			        "fa": "07",
			        "fb": "01"
			      },
			      "wind": "南风微风",
			      "week": "星期六",
			      "city": "长沙",
			      "date_y": "2017年11月25日",
			      "dressing_index": "较冷",
			      "dressing_advice": "建议着厚外套加毛衣等服装。年老体弱者宜着大衣、呢外套加羊毛衫。",
			      "uv_index": "最弱",
			      "comfort_index": "",
			      "wash_index": "不宜",
			      "travel_index": "较不宜",
			      "exercise_index": "较不宜",
			      "drying_index": ""
			    }
				],
  					
			 future: [
				      {
				        "temperature": "7℃~13℃",
				        "weather": "小雨转多云",
				        "weather_id": {
				          "fa": "07",
				          "fb": "01"
				        },
				        "wind": "南风微风",
				        "week": "星期六",
				        "date": "20171125"
				      },
				      {
				        "temperature": "6℃~17℃",
				        "weather": "晴",
				        "weather_id": {
				          "fa": "00",
				          "fb": "00"
				        },
				        "wind": "北风微风",
				        "week": "星期日",
				        "date": "20171126"
				      },
				      {
				        "temperature": "8℃~17℃",
				        "weather": "晴转多云",
				        "weather_id": {
				          "fa": "00",
				          "fb": "01"
				        },
				        "wind": "东南风微风",
				        "week": "星期一",
				        "date": "20171127"
				      },
				      {
				        "temperature": "12℃~17℃",
				        "weather": "小雨",
				        "weather_id": {
				          "fa": "07",
				          "fb": "07"
				        },
				        "wind": "北风微风",
				        "week": "星期二",
				        "date": "20171128"
				      }

				]
			}
		},
		created(){
			var s=document.createElement('script');
			s.src='http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=&dfc=1&charset=utf-8'
			document.body.appendChild(s);
			// this.getWeatherInfo()
			

		},
		mounted(){
			setTimeout(()=>{
				this.name=window.Object.keys(window.SWther.w)[0];
			},2000);
			
			this.lunar=this.$store.state.skill;
		},
		Update(){
			
		},
		watch: {
				todayFa:function(newFa,oldFa){	
				}
			},
		methods:{
			getWeatherInfo(){
				var url='http://v.juhe.cn/weather/index?format=2&cityname=长沙&key=a2d59569305cf29c4aff7ec2f624f5e9';
				var o={};
				this.$http.jsonp(url).then(function(res){
					this.temp=res.body.result.sk.temp;
					o=res.body.result.today
					this.list.push(o);
					this.todayFa=o.weather_id.fa;
					this.future=res.body.result.future.splice(0,4);
					// this.futureFa=
				}).catch(function(err){
					console.log(err);
				})
			}
		}
	}
</script>
<style scoped>
*{
	margin: 0;
	padding: 0;
}
	.headertop{
		margin: 60px 0 55px 0;
		width: 100%;
	}
	
  	.d{
		width: 100%;
		text-align: center;
		display: block;
		letter-spacing: 8px;
	}
	.content{
		width: 100%;
		overflow: hidden;
	}
	.weather{
		display: flex;
		box-sizing:border-box;
		margin: 20px 0;
		position: relative;
		border-bottom: 2px solid #003ada;
	}
	.icon{
		display: block;
		width: 1em;
		height: 1em;
		margin: 0 auto;
	}
	.today{
		flex:1 2 auto; 
		box-sizing:border-box;
		border-right:1px solid #ccc; 

	}
	.case{
		width: 6.5em;
		margin: 0 auto;
	}
	.temperature{
		width: 50%;
		font-size: 2.5em;
		line-height: 1em;
		font-family: 'Microsoft Yahei'

	}
	.date{
		margin-top: 0.5em;
		font-size: 0.8em;
		text-align:center;
	}
	.lunar,
	.solar{
		text-align: center;
		font-size: 0.8em;
		padding: 1em;
		letter-spacing: 0.1em;
	}
	.RT{
		width: 50%;
		font-size: 14px;
		text-align: left;
	}
	.ct{
		width: 100%;
		text-align:center;
		margin: 0.8em 0;
	}
	.weather>div{
		text-align: center;

	}
	.weather>div:nth-of-type(2),
	.weather>div:nth-of-type(3),
	.weather>div:nth-of-type(4),
	.weather>div:nth-of-type(5){
		flex: 1 1 auto;
		margin-top: 0.5em;
		color: blue;
		border-right:1px solid #ccc; 
		box-sizing:border-box;
	}


	.weather>div:nth-of-type(5){
		border-right:none; 
	}

	.future_ct{
		width: 100%;
		text-align:center;
		margin: 1.55em 0;
	}
	.wind{
		margin-bottom: 0;
	}
/*天气字体图标*/
	@font-face {
  font-family: 'iconfont';
  src: url('../../statics/weather/iconfont.eot');
  src: url('../../statics/weather/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../../statics/weather/iconfont.woff') format('woff'),
  url('../../statics/weather/iconfont.ttf') format('truetype'),
  url('../../statics/weather/iconfont.svg#iconfont') format('svg');
}

.iconfont{
  font-family:"iconfont" !important;
  font-size:46px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  background-position: center;
}

.icon-qing:before { content: "\e61f"; }/*晴00*/

.icon-tianqi:before { content: "\e60a"; }/*阴02*/

.icon-tianqi1:before { content: "\e651"; }/*多云01*/

.icon-tianqi2:before { content: "\e61c"; }/*雨07*/

.el-carousel__item div {
    color: #000;
    font-size: 20px;
    opacity: 0.75;
    line-height: 50px;
    padding: 20px 20px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .skill{
  	padding-top: 1em;
  }

  .explain{
  	margin: 0 auto;
  	text-align: center;
  	padding-bottom: 10px;
  }
</style>